### Описание

Пример расширения браузера Google Chrome пересылки сообщений между компонентами расширения:
* inject_script.js
* content_script.js
* background.js
* devtools.js
* popup.js
* options.js

### Технологии

* JavaScript
* Chrome API
* Chrome DevTools

### Установка

1. Загрузить zip-архив репозитория или клонировать репозиторий
2. Распаковать архив
3. Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
```
chrome://extensions/
```
4. В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
5. В верхней левой части экрана нажать кнопку 'Загружить распакованное расширение' и указать путь к папке '/extension' из п.2

### Описание работы

Для демонстрации работы расширения необходимо:

- установить расширение;
- обновить веб-страницу, на которой происходит тестирование расширения;

В примере описано три пути отправки сообщений между компонентами, но возможно взаимодействие
между всеми компонетами согласно используемому API.

Возможны несколько сценариев работы с расширением:
1. демонстрация пересылки сообщений от модуля _inject_script.js_ к модулю _options.js_ через модуль _content_script.js_:
   - нажать на кнопку расширения и открыть вкладку опций;
   - вернуться к изначальной вкладке и нажать в любом месте веб-страницы;
   - в окне успешной отправки сообщения нажать "ОК" и перейти на вкладку опций;
   - на вкладке опций в списке будет показан текст, на который было нажатие ранее;
2. демонстрация пересылки сообщений от страницы опций(options.js) расширения на вкладку 'Panel' в инструментах разработчика:
   - нажать на кнопку расширения и открыть вкладку опций;
   - открыть инструменты разработчика и перейти на вкладку 'Panel';
   - перейти на вкладку опций, написать сообщение и отправить его;
   - перейти на вкладку 'Panel' в инструментах разработчика - в списке будет отображено отправленное со страницы опций сообщение;
3. демонстрация пересылки сообщений из попап-меню (popup.js) на вкладку 'Panel' в инструментах разработчика:
   - открыть инструменты разработчика и перейти на вкладку 'Panel';
   - открыть попап-окно и нажать кнопку "Отправить сообщение на вкладку DevTools";
   - на вкладке 'Panel' в инструментах разработчика будет показано отправленное сообщение со временем отправки;

### Схемы взаимодействия компонентов расширения

<details>
  <summary markdown="span">Диаграмма пересылки сообщений между компонентами расширения Message Sender</summary>
  ![Схема 1](/other/images/sequense_schema.svg)
</details>

<details>
  <summary markdown="span">Схема пересылки сообщений между компонентами расширения Message Sender</summary>
  ![Схема 2](/other/images/component_schema.svg)
  
  Легенда: сплошной линией показаны запросы, пунктирной - ответы. А1 и А4 - только односторонние запросы без ответов.
</details>
